<template>
  <div>
    <!-- <canvas id="three"></canvas> -->
    <!-- <div ref="container"></div> -->
    <div ref="sceneContainer" id="sceneContainer"></div>
  </div>
</template>

<script>
import * as THREE from "three";
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
//gui库
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min";
// 引入stats性能监视器
import Stats from "three/examples/jsm/libs/stats.module";
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass";
export default {
  data() {
    return {
      speed: 0.1, // 移动速度
      isForwardPressed: false,
      isBackwardPressed: false,
      isLeftPressed: false,
      isRightPressed: false,
    };
  },
  mounted() {
    document.addEventListener("keydown", this.handleKeyDown);
    document.addEventListener("keyup", this.handleKeyUp);

    this.init();

    return;

    const animate = () => {
      requestAnimationFrame(animate);

      cube.rotation.x = 10;
      cube.rotation.y = 10;

      renderer.render(scene, camera);
    };

    animate();
  },
  methods: {
    handleKeyDown(event) {
      if (event.key === "ArrowUp") {
        this.isForwardPressed = true;
      } else if (event.key === "ArrowDown") {
        this.isBackwardPressed = true;
      } else if (event.key === "ArrowLeft") {
        this.isLeftPressed = true;
      } else if (event.key === "ArrowRight") {
        this.isRightPressed = true;
      }
    },
    handleKeyUp(event) {
      if (event.key === "ArrowUp") {
        this.isForwardPressed = false;
      } else if (event.key === "ArrowDown") {
        this.isBackwardPressed = false;
      } else if (event.key === "ArrowLeft") {
        this.isLeftPressed = false;
      } else if (event.key === "ArrowRight") {
        this.isRightPressed = false;
      }
    },
    init() {
      // const gui = new GUI();
      const scene = new THREE.Scene();

      // const scene = new THREE.Scene();

      // const camera = new THREE.PerspectiveCamera(
      //   30,
      //   window.innerWidth / window.innerHeight,
      //   1,
      //   4000
      // );
      // camera.position.set(200, 200, 200);
      // camera.position.z = 5;
      // camera.lookAt(0, 0, 0);
      //长方体
      // const geometry = new THREE.BoxGeometry(50, 50, 50);
      //球体
      // const geometry=new THREE.SphereGeometry(50)
      //圆柱圆台
      // const geometry=new THREE.CylinderGeometry(30,30,50)
      //长方平面
      // const geometry=new THREE.PlaneGeometry(30,60)
      //圆形平面
      // const geometry=new THREE.CircleGeometry(60)
      // const material = new THREE.MeshLambertMaterial({
      //   color: 0x00ffff,
      //   transparent: true,
      //   opacity: 0.5,
      //   side: THREE.DoubleSide, //双面可见
      // });

      //镜面反射材质
      //  const material = new THREE.MeshPhongMaterial({
      //   color: 0x00ffff,
      //   shininess:20,//高光强度属性
      //   specular:0xf44444
      // });

      // for (let i = 0; i < 10; i++) {
      //   for (let j = 0; j < 10; j++) {
      //     var mesh = new THREE.Mesh(geometry, material);
      //     mesh.position.set(i * 200, 0, j*200);
      //     scene.add(mesh);
      //   }
      // }

      // 球体
      // const mesh = new THREE.Mesh(geometry, material);
      // scene.add(mesh);
      // 点光源
      // const pointLight = new THREE.PointLight(0xffffff, 4.0);
      // pointLight.decay = 0;
      // pointLight.position.set(100, 100, 40);

      // scene.add(pointLight)
      // 光源
      // const pointHelper=new THREE.PointLightHelper(pointLight,10)
      // scene.add(pointHelper)

      // 环境光

      // const obj = {
      //   x: 30,
      //   scale: 0,
      //   bool: false,
      // };
      // let mat = gui.addFolder("材质");

      // mat.add(ambient, "intensity", 0, 10).name("平行光强度");
      // mat.add(mesh.position, "x", 0, 180);
      // mat.add(mesh.position, "y", 0, 180);
      // mat.add(mesh.position, "z", 0, 180);
      // mat.addColor(material, "color").name("材质颜色");

      // gui.add(obj,'scale',[-100,0,100])
      // gui.add(obj,'scale',{'left':-100,'center':0,'right':100})
      // gui.add(obj, "bool").name("布尔");

      // 平行光
      const directionalLight = new THREE.DirectionalLight(0xfffffc, 3.0);
      directionalLight.position.set(50, 100, 50);
      const ambient = new THREE.AmbientLight(0xffffff, 0.4);
      // gui
      //   .add(directionalLight, "intensity", 0, 10)
      //   .name("环境光强度")
      //   .step(0.1);

      //平行光位置
      // const directionalLightHelper = new THREE.DirectionalLightHelper(
      //   directionalLight,
      //   10
      // );
      // scene.add(directionalLightHelper);

      //点线面
      const gui = new GUI();

      scene.add(ambient);

      const camera = new THREE.PerspectiveCamera(
        30,
        window.innerWidth / window.innerHeight,
        1,
        4000
      );
      // camera.position.set(600, 600, 600);
      camera.position.set(200, 200, 200);
      // camera.position.z = 5;
      camera.lookAt(0, 0, 0);
      // const geometry = new THREE.BufferGeometry();

      // 自定义多边形
      const vertices = new Float32Array([
        0,
        0,
        0, //顶点1
        100,
        0,
        0,
        100,
        100,
        0,
        // 0, 0, 0,
        // 100, 100, 0,
        0,
        100,
        0, //顶点
      ]);
      // 类型化数据创建顶点数据
      // const indexes = new Uint16Array([0, 1, 2, 0, 2, 3]);
      // geometry.index = new THREE.BufferAttribute(indexes, 1);

      // const attribue = new THREE.BufferAttribute(vertices, 3);
      // geometry.attributes.position = attribue;
      // const norlmal = new Float32Array([0, 0, 1,0, 0, 1,0, 0, 1,0, 0, 1]);
      // geometry.attributes.norlmal=new THREE.BufferAttribute(norlmal,3)
      //点材质
      // const material = new THREE.PointsMaterial({
      //   color: 0xffff00,
      //   size: 10,
      // });
      // // 定义点模型数据
      // const points = new THREE.Points(geometry, material);
      // scene.add(points);

      // const material = new THREE.LineBasicMaterial({
      //   color: 0xffff00,
      // });
      //开放
      // const line = new THREE.Line(geometry, material);
      // 闭合
      // const line = new THREE.LineLoop(geometry, material);
      //两点连一条线
      // const line = new THREE.LineSegments(geometry, material);

      // mesh.position.copy(mesh2.position)

      let group = new THREE.Group();
      group.name = "小高层";
      for (let index = 0; index < 5; index++) {
        const geometry = new THREE.BoxGeometry(20, 60, 10);
        // const geometry = new THREE.SphereGeometry(20);
        // geometry.scale(2,2,2)
        const material = new THREE.MeshLambertMaterial({
          color: 0xffff00,
          // wireframe:true,
          transparent: true,
          opacity: 0.5,
        });
        let mesh = new THREE.Mesh(geometry, material);
        mesh.name = index + 1 + "号楼";
        // console.log(mesh);
        mesh.position.set(index * 40, 30, -20);

        group.add(mesh);
      }
      let group2 = new THREE.Group();
      group2.name = "小洋楼";

      for (let index = 0; index < 5; index++) {
        const geometry = new THREE.BoxGeometry(20, 40, 10);
        // const geometry = new THREE.SphereGeometry(20);
        // geometry.scale(2,2,2)
        const material = new THREE.MeshLambertMaterial({
          color: 0xffff00,
          // wireframe:true,
          transparent: true,
          opacity: 0.5,
        });
        let mesh = new THREE.Mesh(geometry, material);
        // console.log(mesh);
        mesh.name = index + 5 + "号楼";

        mesh.position.set(index * 40, 20, 20);

        group2.add(mesh);
      }
      const gridHeleper = new THREE.GridHelper(600, 50, 0x00ffff, 0x00cccc);
      // scene.add(gridHeleper);
      // scene.add(group);
      // scene.add(group2);

      let group3 = new THREE.Group();
      let loader = new GLTFLoader();
      let cubeText = new THREE.CubeTextureLoader()
        .setPath("/环境贴图/环境贴图1/")
        .load(["px.jpg", "nx.jpg", "py.jpg", "ny.jpg", "pz.jpg", "nz.jpg"]);

      loader.load("/gongchang.gltf", function (gltf) {
        group3.add(gltf.scene);

        let mesh = scene.getObjectByName("外壳01");
        console.log(mesh);

        let mesh2 = scene.getObjectByName("玻璃01");
        mesh.material = new THREE.MeshPhysicalMaterial({
          color: mesh.material.color,
          metalness: 1,
          roughness: 0,
          envMap: cubeText,
        });
        mesh2.material = new THREE.MeshPhysicalMaterial({
          metalness: 0,
          roughness: 0,
          clearcoat: 0,
          transmission: 1,
          envMap: cubeText,
          ior: 5,
          clearcoatRoughness: 0,
        });
        // mesh.
      });
      // const perspectives = [
      //   {
      //     position: new THREE.Vector3(0, 0, 5),
      //     target: new THREE.Vector3(0, 0, 0),
      //   },
      //   {
      //     position: new THREE.Vector3(2, 2, 2),
      //     target: new THREE.Vector3(0, 0, 0),
      //   },
      // ];

      // let currentPerspectiveIndex = 0;

      // // 为模型添加点击事件监听器
      // scene.addEventListener("click", function () {
      //   currentPerspectiveIndex =
      //     (currentPerspectiveIndex + 1) % perspectives.length;
      //   const perspective = perspectives[currentPerspectiveIndex];
      //   camera.position.copy(perspective.position);
      //   camera.lookAt(perspective.target);
      // });
      scene.add(group3);
      scene.traverse((obj) => {
        // console.log(obj);

        if (obj.isGroup) {
        }
      });
      //  scene.getObjectByName("大货车");
      let busCar = scene.getObjectByName("存储罐");
      // console.log(scene,999999999);

      console.log(busCar, 55555);
      let cubeText1 = new THREE.CubeTextureLoader()
        .setPath("/环境贴图/环境贴图1/")
        .load(["px.jpg", "nx.jpg", "py.jpg", "ny.jpg", "pz.jpg", "nz.jpg"]);

      scene.background = cubeText1;

      scene.add(directionalLight);
      const color = new THREE.Color();
      color.setRGB(1, 1, 1);

      //渲染器配置
      const renderer = new THREE.WebGLRenderer({
        antialias: true,
      });
      // let mesh = new THREE.BoxGeometry(200, 200, 200);
      // let material1
      let composer = new EffectComposer(renderer);
      const renderPass = new RenderPass(scene, camera);
      composer.addPass(renderPass);
      // OutlinePass第一个参数v2的尺寸和canvas画布保持一致
      const v2 = new THREE.Vector2(window.innerWidth, window.innerHeight);
      // const v2 = new THREE.Vector2(800, 600);
      const outlinePass = new OutlinePass(v2, scene, camera);
      outlinePass.selectedObjects = [mesh];

      composer.addPass(outlinePass);
      // let eu=new THREE.Euler(0,Math.PI/2,0)
      // console.log(eu,'欧拉');
      // mesh.rotation.y=Math.PI/4

      //const v3=new THREE.Vector3(100,50,50)
      //console.log(v3);

      // 解决渲染偏差问题
      // renderer.outputEncoding=THREE.sRGBEncoding

      //告诉设备像素
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setClearColor(0x444444);
      renderer.setSize(window.innerWidth, window.innerHeight);
      let controls = new OrbitControls(camera, renderer.domElement);
      // controls.target.set(1000, 0, 1000);
      // controls.update();

      let axes = new THREE.AxesHelper(100);
      scene.add(axes);
      this.$refs.sceneContainer.appendChild(renderer.domElement);
      //帧率器
      const stats = new Stats();
      this.$refs.sceneContainer.appendChild(stats.domElement);

      // 渲染场景
      const animate = () => {
        stats.update();
        composer.render();
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      };
      animate();
    },
  },
};
</script>

<style scoped>
#sceneContainer {
  width: 50vw;
  height: 50vh;
}
</style>
